
<template>
    <div class="common_page">
        <!-- 搜索 -->
        <div class="common_page_inBox">
            <h3 class="com_h3_title"><i class="el-icon-search"></i> 查找</h3>
            <div class="search_form">
                <el-form :ref="searchForm" :model="searchForm" :inline="true" label-width="">
                    <el-form-item label="真实姓名">
                        <el-input v-model="searchForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="会员手机号">
                        <el-input v-model="searchForm.phone"></el-input>
                    </el-form-item>

                    <el-form-item label="会员等级">
                        <el-select v-model="searchForm.region" placeholder="请选择">
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="注册时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1" style="text-align: center;">~</el-col>
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date2" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit('searchForm')" class="search_btn subBtn">搜索</el-button>
                        <el-button type="" @click="handleAddRow('searchForm')" class="addMember subBtn">新增</el-button>
                        <el-button type="" @click="handleceshi()" class="addMember subBtn">测试</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 表格 -->
        <div class="common_page_inBox clearfix">
            <h3 class="com_h3_title bordernone clearfix">
                <i class="el-icon-date"></i> 会员信息
            </h3>
            <div class="table_box">
                <div class="table" v-loading="loading">
                    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" stripe
                        border>
                        <el-table-column type="expand" >
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="id">
                                        <span>{{ props.row.id }}</span>
                                    </el-form-item>
                                    <el-form-item label="真实姓名">
                                        <span>{{ props.row.userName }}</span>
                                    </el-form-item>
                                    <el-form-item label="会员类型">
                                        <span>{{ props.row.userType }}</span>
                                    </el-form-item>
                                    <el-form-item label="会员昵称">
                                        <span>{{ props.row.nickName }}</span>
                                    </el-form-item>
                                    <el-form-item label="当前金值">
                                        <span>{{ props.row.integralValue }}</span>
                                    </el-form-item>
                                    <el-form-item label="会员等级">
                                        <span>{{ props.row.userGrade }}</span>
                                    </el-form-item>
                                    <el-form-item label="会员手机号">
                                        <span>{{ props.row.userPhone }}</span>
                                    </el-form-item>
                                    <el-form-item label="会员邮件">
                                        <span>{{ props.row.userEmail }}</span>
                                    </el-form-item>
                                    <el-form-item label="logo">
                                        <span>{{ props.row.userLogo }}</span>
                                    </el-form-item>
                                    <el-form-item label="选择角色">
                                        <span>{{ props.row.jyjUserType }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" sortable label="ID" width="80">
                        </el-table-column>
                        <el-table-column prop="userName" label="真实姓名">
                        </el-table-column>
                        <el-table-column prop="userType" label="会员类型">
                        </el-table-column>
                        <el-table-column prop="userGrade" label="会员等级">
                        </el-table-column>
                        <el-table-column prop="integralValue" label="当前金值">
                        </el-table-column>
                        <el-table-column prop="userPhone" label="会员手机号">
                        </el-table-column>
                        <el-table-column prop="userEmail" label="会员邮件">
                        </el-table-column>
                        <el-table-column fixed="right" prop="userUseStatus" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="mini">编辑</el-button>
                                <el-button v-if="scope.row.userUseStatus"  @click.native.prevent="handleDisabled(scope.$index)" size="mini">冻结</el-button>
                                <el-button v-else type="danger" @click.native.prevent="handleEnable(scope.$index)" size="mini">解冻</el-button>
                                <el-button type="danger" @click.native.prevent="handleDelete(scope.$index)" size="mini">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination_container clearfix">
                        <el-pagination 
                            @size-change="handleSizeChange" 
                            @current-change="handleCurrentChange"
                            :current-page="currentPage" 
                            :page-sizes="[10, 20, 50, 100]" 
                            :page-size="pageSize" 
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total" background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="40%">
            <el-form ref="rowInfo" :model="rowInfo" label-width="100px">
                <el-form-item label="真实姓名">
                    <el-input v-model="rowInfo.userName"></el-input>
                </el-form-item>
                <el-form-item label="会员昵称">
                    <el-input v-model="rowInfo.nickName"></el-input>
                </el-form-item>
                <el-form-item label="当前金值">
                    <el-input v-model="rowInfo.integralValue"></el-input>
                </el-form-item>
                <el-form-item label="会员等级">
                    <el-select v-model="rowInfo.userGrade" placeholder="请选择">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="会员手机号">
                    <el-input v-model="rowInfo.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="会员邮件">
                    <el-input v-model="rowInfo.userEmail"></el-input>
                </el-form-item>
                <el-form-item label="logo">
                    <el-input v-model="rowInfo.userLogo"></el-input>
                </el-form-item>
                <el-form-item label="金优家角色">
                    <el-input v-model="rowInfo.jyjUserType"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增弹出框 -->
        <el-dialog title="新增会员" :visible.sync="addVisible" width="40%">
            <el-form ref="rowInfo" :model="rowInfo" label-width="100px">
                <el-form-item label="真实姓名">
                    <el-input v-model="rowInfo.userName"></el-input>
                </el-form-item>
                <el-form-item label="会员昵称">
                    <el-input v-model="rowInfo.nickName"></el-input>
                </el-form-item>
                <el-form-item label="当前金值">
                    <el-input v-model="rowInfo.integralValue"></el-input>
                </el-form-item>
                <el-form-item label="会员等级">
                    <el-select v-model="rowInfo.userGrade" placeholder="请选择">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="会员手机号">
                    <el-input v-model="rowInfo.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="会员邮件">
                    <el-input v-model="rowInfo.userEmail"></el-input>
                </el-form-item>
                <el-form-item label="logo">
                    <el-input v-model="rowInfo.userLogo"></el-input>
                </el-form-item>
                <el-form-item label="金优家角色">
                    <el-input v-model="rowInfo.jyjUserType"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'baseInfo',
        data() {
            return {
                searchForm: { // 查询字段
                    name: '',
                    phone: '',
                    region: '',
                    date1: '',
                    date2: ''
                },
                loading: true,   // 加载层
                currentPage: 1,  // 当前页码
                total: 0,        // 数据总条数
                pageSize: 10,    // 每页显示条数
                tableData: [],   // 表格数据容器
                rowInfo: {       // 编辑字段
                    nickName: '',
                    integralValue: '',
                    userGrade: '',
                    userPhone: '',
                    userEmail: '',
                    userName: '',
                    userLogo: '',
                    jyjUserType: ''
                },
                id: -1,               // 当前编辑条目id
                editVisible: false,   // 编辑层显示控制
                addVisible: false,    // 新增层显示控制
                multipleSelection: [] // 存储选中状态
            }
        },
        created() {
            // 请求表格数据
            let _this = this
            this.$axios.get('http://localhost:8080/static/json/common_table_data.json').
            then((res) => {
                _this.tableData = res.data.result
                _this.total = res.data.total
            }).
            catch((error) => {
                _this.$message.error(error)
            })
        },
        methods: {
            handleceshi () {
                this.$axios.get('http://172.10.10.164:8012/manage/admin/findById?id=1').
                then(res => {
                    console.log(res)
                }).catch(error => {
                    console.log(error)
                })
            },
            getTableData(pages) { // 数据获取的方法
                let _this = this,
                    url = ''
                _this.loading = true
                pages == undefined || pages < 0 ? pages = 1 : pages = _this.currentPage
                
                console.log('获取数据')
                _this.loading = false
                // this.$axios.post(url, {
                //     name: _this.searchForm.name,
                //     region: _this.searchForm.region,
                //     date1: _this.searchForm.date1,
                //     date2: _this.searchForm.date2,
                //     pageSize: _this.pageSize,
                //     currentPage: pages
                // }).
                // then((res) => {
                //     _this.tableData = []
                //     _this.loading = false
                // }).
                // catch((error) => {
                //     _this.$message.error(error)
                //     _this.loading = false
                // })
            },
            deleteItem(index) { // 删除方法
              let _this = this,
                  url   = ''

              // this.$axios.post(url, {
              //     id: str
              // }).
              // then((res) => {
              //   _this.$message.success('删除成功')
              //   // 重新获取数据
              //   _this.getTableData()
              // }).
              // catch((error) => {
              //     _this.$message.error(error)
              // })
            },
            searchSubmit(form) { // 搜索提交
                this.getTableData()
            },
            handleAddRow() { // 新增表格项
                this.rowInfo = {
                    nickName: '',
                    integralValue: '',
                    userGrade: '',
                    userPhone: '',
                    userEmail: '',
                    userName: '',
                    userLogo: '',
                    jyjUserType: ''
                }
                this.addVisible = true
            },
            saveAdd() { // 提交新增
                this.$message.success('新增成功')
                this.addVisible = false
            },
            handleDelete(index) { // 删除
                this.$confirm('确定删除此条信息？', '提示', { type: 'warning' }).then(() => {
                  let str = index.toString()
                  this.deleteItem(str)
                })
            },
            handleEdit(index, row) { // 编辑
                this.id = index
                let item = this.tableData[index]
                this.rowInfo = {
                    nickName: item.nickName,
                    integralValue: item.integralValue,
                    userGrade: item.userGrade,
                    userPhone: item.userPhone,
                    userEmail: item.userEmail,
                    userName: item.userName,
                    userLogo: item.userLogo,
                    jyjUserType: item.jyjUserType
                }
                this.editVisible = true
            },
            saveEdit() { // 保存编辑
                this.$set(this.tableData, this.id, this.rowInfo)
                this.editVisible = false
                this.$message.success('编辑成功')
            },
            handleSizeChange(val) { // 每页显示的数量
                this.pageSize = val
                this.getTableData()
            },
            handleCurrentChange(val) { // 点击页码
                this.currentPage = val
                this.getTableData(val)
            },
            handleSelectionChange(val) { // 单个条目选中状态改变
                this.multipleSelection = val
            },
            handleDisabled (index) {
                this.tableData[index].userUseStatus = !this.tableData[index].userUseStatus
            },
            handleEnable (index) {
                this.tableData[index].userUseStatus = !this.tableData[index].userUseStatus
            }
        },
        mounted() {
            this.loading = false
        }
    }

</script>
<style lang="stylus">
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0 10px;
    box-sizing: border-box;
  }
</style>
